<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-07 17:34:53
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-08 06:57:38
-->
<template>
  <div class="header-box">
    <div class="header">
      <div class="logo">阳光沙滩-券场</div>
      <div class="nav">
        <nuxt-link class="link" v-for="nav in navs" :key="nav.url" :to="nav.url">
          <div @click="active = nav.url" :class="[nav.url === active ? 'nav-active' : '', 'nav-item']">
            {{ nav.name }}
          </div>
        </nuxt-link>
      </div>
      <el-input size="small" v-model="keyword" @clear="clear" clearable placeholder="请输入内容" />
      <el-button size="small" type="danger" @click="search">搜索</el-button>
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus/lib'
const navs = reactive([
  {
    name: '发现',
    url: '/',
  },
  {
    name: '券场',
    url: '/ticket',
  },
  {
    name: '特惠',
    url: '/sell',
  },
])
const active = ref('/')
const keyword = ref('')
const clear = () => active.value === '/search' && $router.go(-1)
const search = () => {
  if (keyword.value === '') return ElMessage.error('搜索关键字不能为空')
  active.value === '/search'
    ? $router.replace(`/search?keyword=${keyword.value}`)
    : $router.push(`/search?keyword=${keyword.value}`)
}
</script>

<style lang="scss" scoped>
.header-box {
  box-shadow: 0 5px 10px #d4d4d4;
  background-color: #fff;
  height: 70px;
  .header {
    width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    .logo {
      font-size: 24px;
      line-height: 70px;
      font-weight: 600;
      color: #c9302c;
    }
    .nav {
      margin-left: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 30px;
      .link {
        text-decoration: none;
        color: #000;
        .nav-item {
          cursor: pointer;
          font-size: 16px;
          font-weight: 600;
          line-height: 70px;
          padding-left: 15px;
          padding-right: 15px;

          &:hover {
            background-color: rgba(0, 0, 0, 0.03922);
          }
        }
        .nav-active {
          background: rgba(0, 0, 0, 0.03922);
        }
      }
    }
    .el-button--danger {
      width: 100px;
      margin-left: 20px;
    }
    .el-input {
      width: 300px;
    }
  }
}
</style>
